<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单列表</title>
		<link rel="stylesheet" type="text/css" href="../../static/css/site.css"
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/center.css"
			th:href="@{/css/center.css}"/>
	</head>
	<body>
	
		<div id="header" th:replace="frag::header"></div>
		
		<div class="user-center">
			<div class="container clear">
				<div class="crumbs">
					<a href="../index.html">首页</a>
					<span class="sep">/</span>
					<a >交易订单</a>
				</div>
				
				<div class="menu">
					<h3>订单中心</h3>
					<ul>
						<li class="active"><a href="orderList.html">我的订单</a></li>
						<li><a href="">评价晒单</a></li>
						<li><a href="">话费充值订单</a></li>
						<li><a href="">以旧换新订单</a></li>
					</ul>
					
					<h3>个人中心</h3>
					<ul>
						<li><a href="">我的个人中心</a></li>
						<li><a href="addr.html">收货地址</a></li>
						<li><a href="">消息通知</a></li>
						<li><a href="">购买资格</a></li>
						<li><a href="">现金账户</a></li>
						<li><a href="">小米礼品卡</a></li>
						<li><a href="">现金券</a></li>
						<li><a href="">喜欢的商品</a></li>
						<li><a href="">优惠券</a></li>
						<li><a href="">红包</a></li>
					</ul>
					
					
					<h3>售后服务</h3>
					<ul>
						<li><a href="">服务记录</a></li>
						<li><a href="">申请服务</a></li>
						<li><a href="">领取快递报销</a></li>
					</ul>
					
					
					<h3>账户管理</h3>
					<ul>
						<li><a href="">个人信息</a></li>
						<li><a href="">修改密码</a></li>
					</ul>
				</div>
				<div class="content">
					<h1 class="title">我的订单<span>请谨防钓鱼链接或诈骗电话，了解更多></span></h1>
					
					<div class="tab">
						<ul class="clear">
							<li class="active"><a href="">全部有效订单</a></li>
							<li><a href="">待支付</a></li>
							<li><a href="">待收货</a></li>
							<li><a href="">订单回收站</a></li>
						</ul>
					</div>
				
				<div class="order-list">
					<!-- 一个订单 -->
					<div class="order-box order-pay">
						<div class="order-header">
							<div class="status status-pay">
								等待付款
							</div>
						</div>
						
						<table class="detail">
							<thead>
								<tr>
									<th class="info">2021年10月24日 10:00 | 张三 | 订单号：5180504797403152| 在线支付（支付宝快捷支付）</th>
									<th class="money">应付金额： <span>2599.00</span> 元</th>
								</tr>
							</thead>
							<tbody>
								
								<tr>
									<td class="goods">
										<div class="goods-box">
											<div class="img">
												<a href=""><img src="../../static/img/big-phone.jpg" ></a>
											</div>
											<div class="goods-info">
												<p class="name"><a href="">Xiaomi Civi 8GB+128GB 闪闪黑</a></p>
												<p class="price">2599元 x 1</p>
											</div>
										</div>
									</td>
									<td class="actions">
										<a class="active" href="">立即付款</a>
										<a href="">订单详情</a>
										<a href="">联系客服</a>
									</td>
								</tr>
								
								<tr>
									<td class="goods">
										<div class="goods-box">
											<div class="img">
												<a href=""><img src="../../static/img/big-phone.jpg" ></a>
											</div>
											<div class="goods-info">
												<p class="name"><a href="">Xiaomi Civi 8GB+128GB 闪闪黑</a></p>
												<p class="price">2599元 x 1</p>
											</div>
										</div>
									</td>
									<td class="actions">
										<a class="active" href="">立即付款</a>
										<a href="">订单详情</a>
										<a href="">联系客服</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
										
				</div>
			</div>
		</div>
		
		<!-- 底部 -->
		<div th:replace="frag::footer" id="footer"></div>
		
		<!-- jQuery -->
		<script type="text/javascript" src="../../static/js/jquery-2.1.4.js" th:src="@{/js/jquery-2.1.4.js}"></script>
		<script th:if="false">
			// 动态页面需要去掉
			$("#header").load("../header.html", function(){
				$(".logo img").attr("src", "../../static/img/logo-mi.png");
			});
			$("#footer").load("../footer.html");
		</script>
		<!-- order.js -->
		<script type="text/javascript" src="../../static/js/order.js" th:src="@{/js/order.js}"></script>
	</body>
</html>
